<template>
    <div class="addside-header">
        <input type="text" placeholder="请按<name,name>格式输入边，按回车键确认" @keyup.enter="add_va" v-model="title">
    </div>
</template>
<script>
    import bus from '@/utils/bus';
    import { ref } from 'vue';
    import { nanoid } from 'nanoid';

    export default{
        name:'AddSideHeader',
        setup() {
            const title = ref('');

            function add_va() {
                if(!title.value) return alert('输入不能为空');
                const side = {id: nanoid(), title: title.value, choose: false};
                if(!/^<\w+,\w+>$/.test(side.title)) {
                    title.value = '';
                    return alert("请按<name,name>格式输入边");
                }
                const regex = /<([^,]+),([^>]+)>/g;
                const matches = regex.exec(side.title);
                const name1 = matches[1];
                const name2 = matches[2];
                const point1 = {id: nanoid(), title: name1, choose: false, color: 'aqua', x: Math.random() * 501, y: Math.random() * 501, isactive: false, indegree: 0, linkpoint: []};
                const point2 = {id: nanoid(), title: name2, choose: false, color: 'aqua', x: Math.random() * 501, y: Math.random() * 501, isactive: false, indegree: 0, linkpoint: []};
                bus.emit('addpoint_txt', point1);
                bus.emit('addpoint_txt', point2);
                bus.emit('addside_list', side);
                title.value = '';
            }

            return {
                title,
                add_va
            }
        }

    }
</script>
<style scoped>
.addside-header{
    box-sizing: border-box;
    height: 12%;
}
.addside-header input{
    width: 95%;
    height: 80%;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: .25rem;
    padding: .25rem .4375rem;
}
.addside-header input :focus{
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 .0625rem .0625rem rgba(0, 0, 0, 0.075),0 0 .5rem rgba(82, 168, 236, 0.8);
}
</style>